<template>
	<view class="login-page">
		<view class="login-logo">
			<image :src="`${picUrl}/jh/logo.png`"></image>
		</view>
		<view class="input-list">
			<view class="input-list-icon">
				<image :src="`${picUrl}/jh/login-phone.png`"></image>
			</view>
			<input class="input-1" type="text" placeholder="请输入账号" placeholder-class="input-1-pc" v-model="mobilepot" />
		</view>
		<view class="input-list" style="margin-top: 102rpx;">
			<view class="input-list-icon">
				<image :src="`${picUrl}/jh/login-pw.png`"></image>
			</view>
			<input class="input-1" type="password" placeholder="请输入登录密码" placeholder-class="input-1-pc"
				v-model="passpot" />
		</view>
		<view class="input-but">
			<view class="but-1" @click="login">登录</view>
		</view>
		<view class="user" @click="agreement()">
			<label>
				<checkbox-group style="display: flex;">
					<checkbox/>
					<text style="margin-left: 20rpx;font-size: 26rpx;">
						我已阅读并同意
						<text class="agreement" @click.stop="agreementRead()">《平台服务协议》</text>
					</text>
				</checkbox-group>
			</label>
		</view>
	</view>
</template>

<script>
	import hexMD5 from '@/common/api_sign/md5.js'
	export default {
		data() {
			return {
				ruleInfo:"",
				tag: false,
				//登录所需参数
				mobilepot: '',
				passpot: '',
				type: "isMobile",
				client: "android",
				href: "/SupplyEnd/taber/home",
			};
		},
		onLoad() {
		},
		onShow() {
		},
		methods: {
			agreement() {
				this.tag = !this.tag;
				console.log(this.tag)
			},
			agreementRead() {
				uni.navigateTo({
					url: '/SupplyEnd/login/rule'
				});
			},
			/**
			 * 账号密码登陆
			 */
			login() {
				let paramData = {};
				let url = '';
				//密码登录
				if (this.mobilepot == '') {
					return uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
				}
				if (this.passpot == '') {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				}
				if (!this.tag) {
					return uni.showToast({
						title: '未勾选用户协议',
						icon: 'none'
					});
				}
				url = '/mobile/index.php?act=supplier-login&op=index';
				paramData = {
					username: this.mobilepot,
					password: hexMD5.hexMD5(this.passpot),
					type: this.type,
					client: this.client
				};
				this.$util.request({
					url: url,
					method: 'POST',
					data: paramData
				}).then((res) => {
					if (res.error_code == 0) {
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						});
						//登录获取token
						uni.setStorageSync('key', res.datas.key);
						//商家其他信息
						let supply_userinfo = {
							member_id: res.datas.member_id,
							member_name: res.datas.member_name,
							seller_id: res.datas.seller_id,
							seller_name: res.datas.seller_name,
							store_id: res.datas.store_id
						}
						uni.setStorageSync("supply_userinfo", supply_userinfo)
						//让弹窗先出现之后跳转
						setTimeout(() => {
							this.loginPageCallback();
						},800)
					} else {
						uni.showToast({
							title: '账号或者密码错误',
							icon: 'none'
						});
					}
				})

			},
			/**
			 * 登录页面返回
			 */
			loginPageCallback() {
				// #ifdef APP-PLUS || H5
				if (this.href && this.href.length > 10 && this.href != '/') {
					if (this.href.indexOf('main/home/') == -1) {
						uni.redirectTo({
							url: this.href,
							fail() {
								uni.switchTab({
									url: '/main/home/index'
								});
							}
						});
					} else {
						uni.switchTab({
							url: this.href,
							fail() {
								uni.switchTab({
									url: '/main/home/index'
								});
							}
						});
					}
				} else {
					uni.switchTab({
						url: '/main/home/index'
					});
				}
				// #endif
				// #ifdef MP-WEIXIN
				uni.redirectTo({
					url: this.href,
					fail() {
						uni.switchTab({
							url: '/main/home/index'
						});
					}
				});
				// #endif
			}
		}
	};
</script>

<style lang="scss" scoped>

	.login-page {
		height: 100%;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0rpx 40rpx;

		.login-logo {
			image {
				width: 251rpx;
				height: 75rpx;
				transform: scale(1.6);
			}
		}

		.input-list {
			margin-top: 138rpx;
			width: 100%;
			opacity: 1;
			position: relative;
			display: flex;
			padding-bottom: 21rpx;

			.input-list-icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.input-1 {
				padding-left: 10rpx;
			}

			.input-1-pc {
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;
			}
		}

		.input-list::after {
			content: '';
			position: absolute;
			width: 200%;
			height: 200%;
			top: 0;
			left: 0;
			transform-origin: 0 0;
			border-bottom: 2rpx solid #CFCFCF;
			transform: scale(0.5, 0.5);
			box-sizing: border-box;
			pointer-events: none;
		}

		.input-but {
			margin-top: 209rpx;

			.but-1 {
				width: 670rpx;
				height: 88rpx;
				background: linear-gradient(138deg, #EA8C1E 0%, #E84A1D 100%);
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 34rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.user {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			font-family: PingFang SC-Regular, PingFang SC;

			.agreement {
				margin-left: 20rpx;
				color: #e24b15;
			}
		}
	}

	// 输入框描述
	/deep/ .input-placeholder {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #d1d1d1;
	}

	// 我已阅读并同意 样式
	/deep/ .uni-checkbox-input {
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
	}

	/deep/ .uni-checkbox-input{
		border-color: #858585 !important;
	}

	/deep/ .uni-checkbox-input-checked {
		color: #e24b15 !important;
		border-color: #e24b15 !important;
	}
	// 弹窗
	.popup-open {
		width: 100%;
		background: #ffffff;
	}

	.login-wx {
		margin-top: 113rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.login-wx-icon {
			width: 60rpx;
			height: 60rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.login-wx-name {
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #646464;
			margin-top: 10rpx;
		}
	}
</style>